import { createElement,render,renderDOM } from "./element";
import App from './App'
import './index.css'
import diff from "./diff";
import patch from './patch'

// 跳过jsx -> 编译过程
{/* <ul className="list">
    <Home></Home>
  <li className="item">周杰伦</li>
  <li className="item">王心凌</li>
</ul> */}
let virtualDom = createElement('ul',{class:'list',value:2 },[
  createElement('li',{class:'item'},['周杰伦']),
  createElement('li',{class:'item'},['王心凌']),
  createElement('li',{class:'item'},['王力宏'])
])
console.log(virtualDom)
let el = render(virtualDom) // 渲染 内存中 document.createElement(tag)
// Element 树 -> Tag 树
console.log(el);
let virtualDom2 = createElement('ul',{class:'list-group'},[
  createElement('li',{class:'item'},['周杰']),
  createElement('li',{class:'item',value:3},['王俊凯']),
  createElement('li',{class:'item'},['王力宏']),
  createElement('li',{class:'item'},['gchlwb'])
])
// 比较两颗dom树，找出差值diff  交给浏览器  diff算法+树的遍历
renderDOM(el,document.getElementById('root'))
// 新的DOM 树
let patches = diff(virtualDom,virtualDom2);
console.log(patches)
// 去旧虚拟DOM 生成界面上打补丁
patch(el,patches)